<template>
	<view :data-theme="themeStyle" class="magic-home">
		<template v-if="!isNetWorkError">
			<download-tip></download-tip>
			<view class="header">
				<view class="header-content">
					<!-- 盒子 -->
					<!-- <view class="box"></view> -->
					<!-- <image class="box" src="../../../static/image/home-box.png" mode="widthFix"></image> -->
					<text class="rule" @click="goRule">规则</text>
					<text class="play-introduce" @click="goPlayIntroduce">玩法介绍</text>
					<view class="btn btn-left" @click="goMoney">
						<image src="../../../static/image/money.png" mode="widthFix"></image>
						<text class="text">{{userInfo.coin||0}}</text>
						<text class="iconfont1 icon-jiantou arrow"></text>
					</view>
					<view class="btn btn-right" @click="goBoxList">
						<image src="../../../static/image/box.png" mode="widthFix"></image>
						<text class="text">盒柜</text>
						<text class="iconfont1 icon-jiantou arrow"></text>
					</view>
				</view>
			</view>
			<view class="goods">
				<notice-bar v-if="boxMsgList.length>0" class="notice-bar" :list="boxMsgList" :autoplay="noticeBarAutoplay"></notice-bar>
				<image v-if="isNew==1&&beginbox.id" class="banner" :src="$util.img(beginbox.adv_img)" mode="widthFix"
					@click="enterNewBox"></image>
				<ls-skeleton animate class="skeleton" :skeleton="skeleton" :loading="firstLoad">
					<view v-if="magicBoxInfo.list.length">
						<view class="magic-bags">
							<magic-bag class="magic-bag" v-for="(item,index) in magicBoxInfo.list" :key="index"
								:value="item" @handleClick="goDetail(item)"></magic-bag>
							<ns-loading :isRotate="true" v-if="magicBoxInfo.loading"></ns-loading>
							<view class="load-finish" v-if="magicBoxInfo.finish">亲，已经到底了哦~</view>
							<!-- #ifdef H5 -->
							<view class="open-link" @click="openLink">copyright  2021 徐州慧迈网络科技有限公司 版权所有 苏ICP备17056307号-2</view>
							<!-- #endif -->
							
						</view>

					</view>
					<view class="empty-wrapper flex justify-center align-center flex-column" v-else>
						<text class=" empty-icon"></text>
						<text class="empty-text">这里什么都没有哦~</text>
					</view>
				</ls-skeleton>
			</view>
			<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
			<ns-login ref="login"></ns-login>
			<full-loading :loadshow="loadshow"></full-loading>
			<!-- 底部tabBar -->
			<!-- <diy-bottom-nav type="shop"></diy-bottom-nav> -->
		</template>
		<template v-else>
			<network-error @refresh="refreshExec"></network-error>
		</template>
	</view>
</template>

<script>
	// import diyBottomNav from '@/components/diy-bottom-nav/diy-bottom-nav.vue';
	import NoticeBar from './components/NoticeBar.vue';
	import magicBag from "@/components/magic-box/magic-bag/index.vue";
	import scroll from '@/common/js/scroll-view.js';
	import toTop from '@/components/toTop/toTop.vue';
	import globalConfig from '@/common/js/golbalConfig.js';
	import lsSkeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		mixins: [globalConfig, scroll],
		components: {
			// diyBottomNav,
			lsSkeleton,
			NoticeBar,
			magicBag,
			toTop
		},
		data() {
			return {
				firstLoad: true,
				skeleton: new Array(10).fill("product").map((item, index) => index % 2 == 0 ? item : 40),
				magicBoxInfo: {
					params: {
						page: 0,
						page_num: 5,
						display: []
					},
					list: [],
					finish: false,
					loading: false,
				},
				beginbox: {
					adv_img: '',
				},
				boxMsgList: [],
				loadshow: false,
				noticeBarAutoplay: true, // 通知栏自动切换
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo || {};
			},
			isLogin() {
				return this.$store.state.isLogin || false;
			},
			isNew(){
				return this.$store.state.isNew;
			}
		},
		watch: {
			isLogin(newVal, oldVal) {
				if (!oldVal && newVal) {
					// 从未登录到登录
					this.refresh();
				}
				if (oldVal && !newVal) {
					// 从登录到未登录
					this.refresh();
				}
			}
		},
		onLoad(data) {
			//收集渠道号
			// #ifdef H5
				if(data.channel){
					 uni.setStorageSync('channel', data.channel);
				}
			// #endif
			this.getNewBoxList();
			this.getOpenMsgList();
		},
		onHide() {
			this.loadshow = false;
			this.noticeBarAutoplay = false;
		},
		onShow() {
			if (this.isLogin) {
				this.$store.dispatch("getUserInfo");
			}
			if(this.loadshow){
				this.loadshow = false;
			}
			this.noticeBarAutoplay = true;
		},
		//下拉刷新
		async onPullDownRefresh() {
			if (this.isLogin) {
				this.$store.dispatch("getUserInfo");
			}
			await this.resetData();
			this.getOpenMsgList();
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			console.log("onReachBottom");
			this.getMagicBoxList();
		},
		methods: {
			openLink(){
				location.href="https://beian.miit.gov.cn/"
			},
			async refresh() {
				await this.resetData();
				this.getOpenMsgList();
			},
			// 进入新手福袋
			enterNewBox() {
				// if (!this.isLogin) {
				// 	this.$refs.login.open('/pages/magic-box/index/index');
				// 	return;
				// }
				this.goDetail(this.beginbox);
			},
			// 获取新手福袋
			async getNewBoxList() {
				const res = await this.$api.sendRequest({
					url: "/api/fudai/list",
					async: false
				})
				this.firstLoad = false
				if (res.code >= 0) {
					this.beginbox = res.data.beginbox || {};
					this.magicBoxInfo.list = res.data.listbox;
				} else {
					this.$util.showToast({
						title: res.message
					});
				}
			},
			// 获取福袋列表
			async getMagicBoxList() {
				if (this.magicBoxInfo.finish || this.magicBoxInfo.loading) {
					return
				}
				this.magicBoxInfo.params.display = this.magicBoxInfo.list.map(item => item.id).join(",");
				if (this.magicBoxInfo.params.display) {
					this.magicBoxInfo.loading = true;
					let _params = Object.assign({}, this.magicBoxInfo.params, {
						page: this.magicBoxInfo.params.page + 1,
					})
					const res = await this.$api.sendRequest({
						url: '/api/fudai/boxlist',
						data: _params,
						async: false
					});
					this.magicBoxInfo.loading = false;
					if (res.code >= 0) {
						if (Array.isArray(res.data)) {
							this.magicBoxInfo.params.page++
							this.magicBoxInfo.list = [...this.magicBoxInfo.list, ...res.data]
							//没有更多
							if (!res.data.length) {
								this.magicBoxInfo.finish = true
							}
						} else if (res.data.list) {
							this.magicBoxInfo.params.page++
							this.magicBoxInfo.list = [...this.magicBoxInfo.list, ...res.data.list]
							//没有更多
							if (!res.data.list.length) {
								this.magicBoxInfo.finish = true
							}
						}
						// this.magicBoxInfo.list = [...this.magicBoxInfo.list, ...res.data];
						// console.log(this.magicBoxInfo.list)
					} else {
						this.$util.showToast({
							title: res.message
						});
					}
				}
			},
			// 获取开盒消息
			async getOpenMsgList() {
				const res = await this.$store.dispatch('getOpenMsgList', {});
				this.boxMsgList = res;
			},
			// 重置数据
			async resetData() {
				this.firstLoad = true
				this.magicBoxInfo = {
					params: {
						page: 0,
						page_num: 5,
						display: []
					},
					list: [],
					finish: false,
					loading: false,
				};
				this.getNewBoxList();
			},
			// 去盲盒详情
			goDetail(item) {
				// if (!this.isLogin) {
				// 	this.$refs.login.open('/pages/magic-box/index/index');
				// 	return;
				// }
				this.loadshow = true;
				setTimeout(()=>{
					this.loadshow = false;
				},2000)
				this.$util.redirectTo('/pages/magic-box/detail/detail', {
					magicBoxId: item.id
				});
			},
			goRule() {
				this.$util.redirectTo('/pages/magic-box/rule/index', {
					url: '/api/protocal/servicehelp.html'
				});
			},
			goPlayIntroduce() {
				this.$util.redirectTo('/pages/magic-box/rule/play-introduce');
			},
			goBoxList() {
				if (!this.isLogin) {
					this.$util.redirectTo('/otherpages/login/login/login', { back: encodeURIComponent('/pages/magic-box/index/index') });
					// this.$refs.login.open();
					return;
				}
				this.$util.redirectTo('/magicpages/magic/box_ark');
			},
			goMoney() {
				if (!this.isLogin) {
					this.$util.redirectTo('/otherpages/login/login/login', { back: encodeURIComponent('/pages/magic-box/index/index') });
					// this.$refs.login.open('/pages/magic-box/index/index');
					return;
				}
				this.$util.redirectTo('/magicpages/coin_record/coin_record');
			}

		},

	}
</script>

<style lang="scss" scoped>
	@import "./base64.scss";
	/* #ifdef H5 */
	.skeleton {
		margin: 0 20rpx 0 20rpx!important;
	}
	/* #endif */
	
	.open-link{
		margin-top: 20rpx;
		font-size: 24rpx;
		text-align: center;
	}
	.magic-home {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		flex: 1;
		background: #E9EBF9;
		// padding-bottom: 99rpx;
		box-sizing: border-box;

		.header {
			width: 100%;
			height: 421rpx;

			position: relative;

			.header-content {
				width: 100%;
				height: 460rpx;
				// padding-top: 254rpx;
				// box-sizing: border-box;
				overflow: hidden;
				background: $banner1 no-repeat;
				background-size: 100% auto;

				.rule {
					padding: 0 17rpx 0 17rpx;
					box-sizing: border-box;
					width: 55rpx;
					height: 96rpx;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 21rpx 0rpx 0rpx 21rpx;
					color: #333333;
					font-weight: bold;
					font-size: 22rpx;
					line-height: 28rpx;
					position: absolute;
					right: 0;
					top: 83rpx;
					display: flex;
					align-items: center;
				}
				.play-introduce{
					padding: 0 16rpx 0 17rpx;
					box-sizing: border-box;
					line-height: 28rpx;
					width: 55rpx;
					height: 133rpx;
					color: #333333;
					font-weight: 500;
					font-size: 24rpx;
					position: absolute;
					right: 0;
					top: 196rpx;
					background: rgba(255, 255, 255, 0.8);
					border-radius: 21rpx 0rpx 0rpx 21rpx;
					display: flex;
					align-items: center;
					line-height: 26rpx;
				}
				// .box {
				// 	display: block;
				// 	margin: 0 auto;
				// 	width: 281rpx;
				// 	height: 215rpx;
				// 	background: $homeBox;
				// 	background-size: 100% 100%;
				// 	animation: heart 1.3s ease-in-out 0s infinite alternate;
				// }

				// @keyframes heart {
				// 	from {
				// 		transform: translateY(0);
				// 	}

				// 	to {
				// 		transform: translateY(24rpx);
				// 	}
				// }

				.btn {
					display: flex;
					align-items: center;
					min-width: 127rpx;
					height: 67rpx;
					background: rgba(255, 255, 255, 0.2);
					border: 1px solid rgba(255, 255, 255, 0.5);
					border-radius: 45rpx;
					color: #FFFFFF;
					position: absolute;
					font-size: 28rpx;

					.arrow {
						font-size: 20rpx;
						display: flex;
						align-items: center;
					}

					&.btn-left {
						top: 331rpx;
						left: 42rpx;

						>image {
							width: 53rpx;
							height: 57rpx;
							display: inline-block;
							margin-left: 18rpx;
							flex-shrink: 0;
						}

						.text {
							flex: 1;
							text-align: center;
							display: inline-block;
							margin-right: 15rpx;
							font-weight: bold;
						}

						.arrow {
							margin-right: 28rpx;
							// right: 24rpx;
						}
					}

					&.btn-right {
						top: 331rpx;
						right: 42rpx;

						>image {
							width: 53rpx;
							height: 44rpx;
							margin-left: 26rpx;
							flex-shrink: 0;
						}

						.text {
							flex: 1;
							text-align: center;
							display: inline-block;
							margin: 0 15rpx;
						}

						.arrow {
							margin-right: 18rpx;
						}
					}
				}

			}
		}

		.goods {
			width: 100%;
			background: #E9EBF9;
			border-radius: 45rpx 45rpx 0px 0px;
			position: relative;
			z-index: 50;

			.banner {
				width: 708rpx;
				height: 257rpx;
				display: block;
				margin: 20rpx auto;
			}

			.notice-bar {
				margin: 20rpx 0;
			}

			.magic-bags {
				padding: 0 22rpx 0 19rpx;
				box-sizing: border-box;

				.magic-bag {
					margin-bottom: 15rpx;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

		}

	}
</style>
